<!--
 * @Description: 科室的主页
 * @Version: 1.0
 * @Author: YueXuanzi
 * @Date: 2024-09-09 14:42:20
 * @LastEditors: YueXuanzi
 * @LastEditTime: 2024-09-28 19:38:38
 * @心得体会: 无
-->
<template>
    <div class="w-full">
        <el-form :inline="true" :model="formInline" class="w-full h-10">
            <el-form-item label="项目名称">
                <el-input v-model="formInline.projectName" placeholder="项目名称" clearable class="w-40"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!-- 表格显示 -->
    <el-table :data="tableData" style="width: 100%" border height="60vh" highlight-current-row @row-dblclick="getInfo">
        <el-table-column prop="projectInspectionId" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"  align="center"></el-table-column>
        <el-table-column prop="departmentName" label="项目科室"  align="center"></el-table-column>
        <el-table-column prop="description" label="项目描述"  align="center"></el-table-column>
        <el-table-column prop="price" label="价格"  align="center"></el-table-column>
        <el-table-column prop="remark" label="备注"  align="center"></el-table-column>
        <el-table-column prop="stutas" label="状态"  align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">{{ scope.row.status === '1' ? '正常' : '停用' }}</el-tag>
          </template> 
        </el-table-column>
    </el-table>
    <div class="flex justify-center items-end w-full h-16 mt-2">
        <el-pagination
            v-model:current-page="pageForm.currentPage"
            v-model:page-size="pageForm.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
            <el-switch v-model="background" class="ml-2" />
    </div>
    
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
// 导入axios
import { getList } from "@/api/project/project.js"

// 表格数据
const tableData = ref([
])
// 北京
const background = ref(false)
// 最后一页面
const pageForm = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 50
})
// 搜索
const formInline = reactive({
  projectName: "",
  departmentNameX: [
    {id: 1, name: '科室一'},
    {id: 2, name: '科室二'},
  ],
  departmentName: ""
})
const pageSearch = computed(() => {
  return {
    page: pageForm.currentPage,
    limit: pageForm.pageSize,
    projectName: formInline.projectName,
    // departmentName: formInline.departmentName,
  }
})
function initDate(){
      getList(pageSearch.value).then(res =>{
        // console.log(res)
        tableData.value = res.data.list
        // 进行数据修改！！！
        pageForm.currentPage = res.data.currPage
        pageForm.pageSize = res.data.pageSize
        pageForm.total = res.data.totalCount
      })
}
// 首先进行初始化
initDate()
// 搜搜
const onSearch = () => {
  console.log(pageSearch)
  initDate()
}
// 双击查看(先不查看)
const getInfo = (row, event, column) => {
  console.log(row.projectInspectionId)
}

const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  initDate()
}
const handleCurrentChange = (val) => {
  // console.log(`current page: ${val}`)
  initDate()
}

</script>

<style scoped>

</style>